<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="计划编号" prop="planNo">
            <el-input v-model="form.planNo" readonly placeholder="请输入计划编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="80">
            <el-switch
              v-model="autoGenFlag"
              active-color="#13ce66"
              active-text="自动生成"
              @change="handleAutoGenChange(autoGenFlag)">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="计划名称" prop="planName">
            <el-input v-model="form.planName" placeholder="请输入计划名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="需求截止日期" prop="deadline">
            <el-date-picker
              clearable
              v-model="form.deadline"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择需求截止日期"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="预计成本(元)" prop="totalCost">
            <el-input-number
              :min="1"
              v-model="form.totalCost"
              placeholder="请输入预计成本"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="form.remarks" type="textarea " placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="center">计划产品信息</el-divider>
    <el-card shadow="always" class="box-card">
      <el-table :data="lineList" border>
        <el-table-column label="产品编号" align="center" prop="productCode"/>
        <el-table-column label="产品名称" align="center" prop="productName"/>
        <el-table-column label="规格型号" align="center" prop="specification"/>
        <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
        <el-table-column label="需求数量" align="center" prop="productQuantity">
          <template slot-scope="scope">
            <el-input-number
              :min="scope.row.productQuantity"
              type="number"
              size="mini"
              v-model="scope.row.productQuantity"
            />
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <div slot="footer" style="text-align:center;margin-top: 20px;">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
<script>

import { genCode } from "@/api/system/autocode/rule";
import { addPlan } from "@/api/mes/pro/outsourcingplan";
import { getType } from "@/api/mes/md/excrete"

export default {
  name: "OutsourcingPlan",
  data() {
    return {
      lineList: [],
      autoGenFlag: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        planNo: [
          {required: true, message: "计划编号不能为空", trigger: "blur"}
        ],
        deadline: [
          {required: true, message: "需求截止日期不能为空", trigger: "blur"}
        ],
        sourceType: [
          {required: true, message: "来源类型不能为空", trigger: "blur"}
        ],
      }
    }
  },
  created() {
    this.reset();
  },
  methods: {
    reset() {
      const id = this.$route.params.id;
      this.form = {
        sourceType: 'EXCRETE',
        sourceCode: null,
        sourceId: id,
        planId: null,
        planNo: null,
        planName: null,
        planDate: null,
        deadline: null,
        status: 0,
        remarks: null,
        totalCost: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        tenantId: null
      };
      this.resetForm("form");
      this.autoGenFlag = false;
      getType(id, 4).then(response => {
          response.data.excreteItems.forEach(item => {
            this.lineList.push({
              productId: item.itemId,
              productCode: item.itemCode,
              productName: item.itemName,
              specification: item.specification,
              unitOfMeasure: item.unitOfMeasure,
              price: 0,
              productQuantity: item.used,
              totalCost: null,
              updateStatus: false,
            })
          })
      })
    },
    // 取消按钮
    cancel() {
      const obj = {path: "/design/excreteOutsource"};
      this.$tab.closeOpenPage(obj);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.lineList.length > 0) {
            let l = this.lineList.find(item => {
              return item.productQuantity == "" || item.productQuantity == null
            })
            if (l) {
              this.$modal.msgError("产品需求数量不能为空！");
              return;
            }
            this.form.lineList = this.lineList;
            addPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel()
            });
          } else {
            this.$modal.msgError("请添加计划产品！");
          }
        }
      });
    },
    //自动生成编号
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode('OUTSOURCE_PLAN_CODE').then(response => {
          this.form.planNo = response;
        });
      } else {
        this.form.planNo = null;
      }
    },
  }
}
</script>
